import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
import { GUI } from 'lil-gui';
import { AxesHelper } from 'three'; // 导入 AxesHelper 用于显示坐标轴
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 导入 OrbitControls 用于相机控制
import { log } from 'console';

export default function index() {
  const mountRef = useRef(null);
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 5);
    scene.add(camera);

    // font  fontLoader.load(文字路径，回调函数 回调函数内创建字体网格对象)
    const fontLoader = new FontLoader();
    fontLoader.load('/text/gentilis_bold.typeface.json', (font) => {
      console.log('font', font);
      const textGeometry = new TextGeometry('Hello Three.js', {
        font: font, // 字体
        size: 1, // 大小
        height: 0.0001, // 厚度
        bevelEnabled: false, // 关闭斜角
      });
      textGeometry.center();
      const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
      });
      const textMesh = new THREE.Mesh(textGeometry, material);
      scene.add(textMesh);
    });

    const axesHelper = new AxesHelper(5);
    scene.add(axesHelper);

    const gui = new GUI();
    gui.add(camera.position, 'x').min(0).max(60).step(0.1);
    gui.add(camera.position, 'y').min(0).max(60).step(0.1);
    gui.add(camera.position, 'z').min(0).max(100).step(1);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, mountRef.current);
    const animate = () => {
      controls.update();
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }, []);
  return <div ref={mountRef} />;
}
